<template>
  <div class="addAdv">
    <el-row>
      <breadcrumb class="breadcrumb-container"></breadcrumb>
    </el-row>
    <el-row>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card>
          <el-form :model="advForm" :rules="rules" label-width="80px" ref="form" size="small">
            <el-form-item label="广告分类" prop="type">
              <el-select v-model="advForm.type">
                <el-option v-for="(item,index) in option" :key="index" :value="item.adver_id" :label="item.adver_name">{{ item.adver_name }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="广告状态" prop="status">
              <el-radio-group v-model="advForm.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">下线</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="time">
              <el-form-item label="时间范围" prop="start_time">
                <el-date-picker type="date" placeholder="开始时间" value-format="yyyy-MM-dd" v-model="advForm.start_time" @change="startTiem"></el-date-picker>
              </el-form-item>
                <span>-</span>
              <el-form-item prop="stop_time" label-width="0px" class="end">
                <el-date-picker type="date" placeholder="结束时间" value-format="yyyy-MM-dd" v-model="advForm.stop_time" @change="endTiem"></el-date-picker>
              </el-form-item>
            </div>
            <el-form-item label="广告描述" prop="describe">
              <el-input v-model="advForm.describe"></el-input>
            </el-form-item>
            <el-form-item label="广告链接" prop="link">
              <label for="link"></label>
              <el-input v-model="advForm.link" placeholder="http://baidu.com或者https://baidu.com"></el-input>
            </el-form-item>
            <el-form-item class="upload" label="广告图片" prop="logo">
              <label for="upload">建议上传分辨率为750*1135的图片</label>
              <el-upload :action="advForm.url" :limit="1" :show-file-list="false" :multiple="false" :on-success="filesPositive" :before-upload="beforeAvatarUpload">
                <el-button type="primary" size="small">点击上传</el-button>
              </el-upload>
              <img v-if="advForm.logo" :src="advForm.logo" alt="图片加载失败">
            </el-form-item>
          </el-form>
        </el-card>
        <el-button type="primary" size="small" class="mt20 fr" @click="submit">确认保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { addSubmit, advlistInit, adverGet, adverEdit } from '@/api/advert'
import { validateURL } from '@/utils/validate'

export default {
  name: 'advertsingList',
  components: {
    Breadcrumb
  },
  data() {
    const validateUrl = (rule, value, callback) => {
      if (!validateURL(value)) {
        callback(new Error('链接格式不对哦~'))
      } else {
        callback()
      }
    }
    return {
      advForm: {
        type: '',
        describe: '',
        link: '',
        logo: '',
        start_time: '',
        stop_time: '',
        status: 1,
        url: process.env.BASE_API + '/merchant/uploadCommer'
      },
      rules: {
        type: [{ required: true, trigger: 'change', message: '必须选择哟~' }],
        describe: [{ required: true, trigger: 'blur', message: '必须选择哟~' }],
        status: [{ required: true, trigger: 'change', message: '必须选择哟~' }],
        link: [{ required: true, trigger: 'blur', validator: validateUrl }],
        logo: [{ required: true, trigger: 'change', message: '必须上传哟~' }],
        start_time: [{ required: true, trigger: 'change', message: '时间选择有误哟~' }],
        stop_time: [{ required: true, trigger: 'change', message: '时间选择有误哟~' }]
      },
      option: []
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (!this.$route.query.id) {
            addSubmit(this.id, this.advForm).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
                this.$refs['form'].resetFields()
                this.$router.go(-1)
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
          } else {
            adverEdit(this.$route.query.id, this.advForm).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
                this.$router.go(-1)
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
          }
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！')
      }
      return isJPG && isLt2M
    },
    filesPositive(file) {
      this.advForm.logo = file.result
    },
    startTiem(v) {
      this.advForm.start_time = v
    },
    endTiem(v) {
      this.advForm.stop_time = v
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    advlistInit().then(response => {
      this.option = response.data.result
    })
    if (this.$route.query.id) {
      adverGet(this.$route.query.id).then(response => {
        this.advForm.created_at = response.data.result.created_at
        this.advForm.describe = response.data.result.describe
        this.advForm.link = response.data.result.link
        this.advForm.logo = response.data.result.logo
        this.advForm.start_time = response.data.result.start_time
        this.advForm.stop_time = response.data.result.stop_time
        this.advForm.status = response.data.result.status
        this.advForm.type = response.data.result.type
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.addAdv{
  .el-form{
    .el-form-item{
      .el-input{
        display: inline-block;
        width: 75%;
      }
      img{
        padding-left: 60px;
        width: 300px;
        height: 100px;
      }
    }
    .upload{
      .el-form-item__content{
        &>div{
          display: inline-block;
        }
      }
    }
    .time{
      /deep/ .el-form-item {
        display: inline-block;
        width: 40%;
        .el-date-editor{
          width: 100%
        }
      }
      .end{
        width: 130px;
      }
    }
  }

}
</style>
